<template>
    <img height="1" width="1" style="display:none" :src="`https://www.facebook.com/tr?id=${pixel_code}&ev=PageView&noscript=1`" />
    <div>
        <Header v-show="showHeaderStore.isShowHeader" ref="HeaderRef"/>
        <div class="game-box" ref="game_box">
            <iframe ref="iframe" width="100%" height="100%" :src="game_url" frameborder="0" :scrolling="route.query.id == 312135 ? 'auto' : 'no'"></iframe>
            <div class="gameTip" v-if="isShowTip && !isPc">
                <img width="30" src="https://yyfuns.com/static/logoZ.png" alt="">
                <p @click="downLoadGameApp">{{ $t('downLoadTip') }}</p>
                <svg @click="isShowTip = false" t="1736840527154" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4266" width="15" height="15"><path d="M0 0h1024v1024H0z" fill="#ffffff" fill-opacity="0" p-id="4267"></path><path d="M240.448 168l2.346667 2.154667 289.92 289.941333 279.253333-279.253333a42.666667 42.666667 0 0 1 62.506667 58.026666l-2.133334 2.346667-279.296 279.210667 279.274667 279.253333a42.666667 42.666667 0 0 1-58.005333 62.528l-2.346667-2.176-279.253333-279.253333-289.92 289.962666a42.666667 42.666667 0 0 1-62.506667-58.005333l2.154667-2.346667 289.941333-289.962666-289.92-289.92a42.666667 42.666667 0 0 1 57.984-62.506667z" fill="#ffffff" p-id="4268"></path></svg>
            </div>
        </div>
        <!-- <RechargeComp :pay_info="pay_info" v-if="isEconomical" :isEconomical="isEconomical" :closeBox="closeBox" :price="price"/> -->
    
        <div class="recharge_content" v-if="isEconomical" >
		    <RechargeComp :setPayResult="setPayResult" :pay_info="pay_info" :isEconomical="isEconomical" :closeBox="closeBox" :price="price" :openDialog="openDialog" :goHome="goHome"/>
		</div>

        <div class="pay_result" v-show="showPayResultStore.isPayResult">
            <div class="close" @click="close_pay_result"></div>
            <!-- <Loadding v-show="isLoading" /> -->
            <iframe :src="pay_result_src" width="100%" height="100%" frameborder="0" ></iframe>
        </div>

        <div v-if="isShowLoginStore.isShowLogin">
            <Login :isShowLogin_fn="isShowLogin_fn"/>
        </div>

        <div class="circle-nav test open" id="show_play_game_list"
            :style="{ top: navTop + 'px', left: navLeft + 'px' }"
            @mousedown="startDrag"
            @touchstart="startDrag"
            @click="toggleVisibility"
            :class="{ 'transition-all': !isDragging, hidden: isHidden ,'isRight':isRight && is_gif_Show }">
            <div class="circle-inside">
                <div class="ring ring-back"  :class="is_gif_Show ? 'off' : 'on'"></div>
                <div class="ring delay"  :class="is_gif_Show ? 'off' : 'on'">
                    <!-- <a @click="toPages('/pages/Home/GameDetails/index?id='+item.id)" class="menuItem" external="0" v-for="item in userPlayList" :key="item.id">
                        <img class="img" :src="$baseUrl+item.icon" alt=".....">
                        <p class="text">{{item.title}}</p>
                    </a>      -->

                    <div v-if="pwa">
                        <a @click="isShowLoginStore.isShowLogin = true" class="menuItem_pwa menuItem" data-game="allplayed" external="1">
                            <div class="allPlay"></div>
                            <p>{{ $t('switch_accounts') }}</p>
                        </a>
                        <a :href="fb_url" target="_blank" class="menuItem_pwa menuItem" data-game="allplayed" external="1">
                            <div class="allPlay"></div>
                            <p>{{ $t('customer_service') }}</p>
                        </a>
                    </div>

                    <div v-if="!pwa">
                        <a @click="toPages('/')" class="menuItem" data-game="allplayed" external="1">
                            <div class="allPlay"></div>
                            <p>{{ $t('game_platform') }}</p>
                        </a>
                        <!-- <a @click="toPages('/pages/Activity/index')" class="menuItem" data-game="allplayed" external="1">
                            <div class="allPlay"></div>
                            <p>{{ $t('Activity_Center') }}</p>
                        </a> -->
                        <a v-if="user_info.status == 0" @click="openBind" class="menuItem" data-game="allplayed" external="1">
                            <div class="allPlay"></div>
                            <p>{{ $t('Binding_gifts') }}</p>
                        </a>
                        <a v-if="user_info.status == 1" @click="toPages('/pages/Recharge/economical/index')" class="menuItem economical" data-game="allplayed" external="1">
                            <div class="allPlay"></div>
                            <p style="color: #ff8900;">{{ $t('Money_card') }}</p>
                        </a>
                        <a ref="menuItem_my" @click="toPages('/pages/Recharge/gift_game/index')" class="menuItem" data-game="allplayed" external="1">
                            <div class="allPlay"></div>
                            <p>{{ $t('Welfare_Center') }}</p>
                        </a>
                        <a @click="toPages('/pages/My/index',2)" class="menuItem" data-game="allplayed" external="1">
                            <div class="allPlay"></div>
                            <p>{{ $t('Personal_Center') }}</p>
                        </a>
                        <a class="menuItem" external="0" @click="toCus">
                            <div class="allPlay"></div>
							<p class="" :class="{text_en:lang == 'en'}">{{$t('customer_service')}}</p>
                            <div class="tag" v-if="unreadMessage && !isCustomerservice">{{ unreadMessage }}</div>
						</a> 
                        <!-- <a class="menuItem" external="0">
                            <div class="allPlay"></div>
							<p class="" :class="{text_en:lang == 'en'}">{{$t('online_customer_service')}}</p>
						</a>  -->
                        <!-- <a class="menuItem" @click="toPages('/pages/Home/index',1)" data-game="allplayed" external="1">
                            <div class="allPlay"></div>
                            <p>返回</p>
                        </a> -->
                    </div>
                </div>
                <a class="center" ref="round">
                    <div class="back"></div>
                    <div class="round" style="display: none;"></div>
                    <p v-if="lang == 'zh'" style="background-image: url(https://yyfuns.com/static/logoZ.png)" @click="is_gif_Show = !is_gif_Show"></p>
                    <p v-if="lang == 'en'" style="background-image: url(https://yyfuns.com/static/logoZ_en.png)" @click="is_gif_Show = !is_gif_Show"></p>
                    <div class="tag" v-if="unreadMessage && !isCustomerservice">{{ unreadMessage }}</div>
                </a>
            </div>
        </div>

        <BindAccount :visible="visible" :handleClose='handleClose' :getUserInfo="getUserInfo" :isGame="true"/>
        <Dialog v-if="lang == 'zh'" :title="'請確認付款'" :cancel_title="'還未支付'" :sub_title="'已完成支付'" :visible="dialog_show" :handleClose='dialog_hide' :paySubmit="paySubmit"/>
        <Dialog v-if="lang == 'en'" :title="'Please confirm payment'" :cancel_title="'Not yet paid'" :sub_title="'Payment completed'" :visible="dialog_show" :handleClose='dialog_hide' :paySubmit="paySubmit"/>
        <Dialog v-if="lang == 'zh'" :title="'是否確定保存桌面？'" :cancel_title="'取消'" :sub_title="'確定'" :visible="isShowPlatform" :handleClose='hidePlatform' :paySubmit="platformSub"/>
        <Dialog v-if="lang == 'en'" :title="'Are you sure to save the desktop?'" :cancel_title="'cancel'" :sub_title="'confirm'" :visible="isShowPlatform" :handleClose='hidePlatform' :paySubmit="platformSub"/>
        
        <div class="modal_iframe" v-if="goHome">
            <div class="close_box">
                <p @click="closeGoHome" :class="{'back':!home_url}" v-if="isCloseGoHome">
                    <b class="b"><svg t="1734943314137" class="icon svg" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9201" width="25" height="25"><path d="M0 0h1024v1024H0z" fill="#707070" fill-opacity="0" p-id="9202"></path><path d="M240.448 168l2.346667 2.154667 289.92 289.941333 279.253333-279.253333a42.666667 42.666667 0 0 1 62.506667 58.026666l-2.133334 2.346667-279.296 279.210667 279.274667 279.253333a42.666667 42.666667 0 0 1-58.005333 62.528l-2.346667-2.176-279.253333-279.253333-289.92 289.962666a42.666667 42.666667 0 0 1-62.506667-58.005333l2.154667-2.346667 289.941333-289.962666-289.92-289.92a42.666667 42.666667 0 0 1 57.984-62.506667z" fill="#707070" p-id="9203"></path></svg></b>
                </p>
                <div v-if="home_url" @click="toPages('/',1)">
                    <svg t="1729129782098" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5757" width="25" height="25"><path d="M629.557 391.972c17.329 17.32 47.028 17.32 66.815 0l168.302-165.814v133.637c0 19.806 14.85 34.647 34.637 34.647h24.743c19.806 0 34.657-12.372 34.657-29.692V119.733h-2.479l2.479-17.318c0-9.904-2.479-17.33-7.436-24.752-4.936-4.948-14.848-9.895-24.743-9.895h-17.327L664.211 65.29c-19.805 0-34.654 17.329-34.654 34.646v24.752c2.478 22.274 19.789 34.646 39.593 34.646h128.69L632.036 325.149c-22.283 17.319-22.283 47.026-2.478 66.823zM394.44 629.557c-17.31-17.327-47.009-17.327-66.815 0l-168.3 165.807V664.195c0-19.787-14.833-34.638-34.638-34.638h-24.76c-19.788 0-34.639 12.372-34.639 29.699v242.533h2.478l-2.478 17.327c0 9.894 2.478 17.31 7.416 24.744 4.956 4.956 14.868 9.894 24.761 9.894h17.328l244.993 2.478c19.823 0 34.655-17.328 34.655-34.638v-24.76c-2.478-22.266-19.788-34.638-39.593-34.638H226.16l168.283-165.824c17.327-17.327 17.327-47.027-0.001-66.815z m561.79 274.709v-242.55c0-19.787-17.329-29.68-34.639-29.68h-24.759c-19.788 0-34.639 17.31-34.639 34.638v131.168l-168.3-165.806c-17.309-17.329-47.01-17.329-66.816 0-17.326 17.31-17.326 47.009 0 66.814l168.284 165.806h-128.69c-19.787 0-37.116 12.388-39.594 34.654v24.745c0 19.805 17.33 34.654 34.64 34.654l240.071-2.478h17.329c9.893 0 17.31-2.478 24.743-9.894 4.955-4.956 7.415-14.85 7.415-24.744l4.955-17.327c-2.478 0 0 0 0 0zM228.636 159.335h128.69c19.806 0 37.116-12.373 39.593-34.646V99.936c0-19.797-17.309-34.646-34.654-34.646l-244.993 2.478H99.927c-9.876 0-17.31 2.478-24.743 9.895-4.939 4.956-7.416 14.849-7.416 24.752l2.477 17.318h-2.477v245.018c0 19.797 14.85 29.692 34.638 29.692h24.743c19.823 0 34.655-14.841 34.655-34.646v-133.64l168.283 165.815c17.345 17.32 47.045 17.32 66.832 0 17.33-17.327 17.33-47.026 0-66.823L228.636 159.335z m0 0" p-id="5758" fill="#707070"></path></svg>
                </div>
            </div>
            
            <iframe id="myIframe" :onload="iframeLoaded" ref="goHomediv" class="goHome" :src="goHome_url" width="100%" height="100%" frameborder="0" scrolling="no"></iframe>
        </div>

        <div class="round_tip" ref="round_tip">
            <div class="close_box" @click="close_box" @touchstart="close_box">
                <svg t="1726643104962" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4272" width="20" height="20"><path d="M594.983303 512.554066l411.9697 411.9697a58.304836 58.304836 0 0 1-82.428037 82.428036L512.555267 594.982103 100.585567 1006.951802a58.304836 58.304836 0 0 1-82.428036-82.428036L430.127231 512.554066 18.157531 100.584367A58.304836 58.304836 0 1 1 100.585567 18.156331L512.555267 430.12603 924.524966 18.156331a58.304836 58.304836 0 0 1 82.428037 82.428036L594.983303 512.554066z" fill="#2c2c2c" p-id="4273"></path></svg>
            </div>
            <img v-if="lang == 'zh'" width="100%" src="../../assets/round_tip.png" alt="">
            <img v-if="lang == 'en'" width="100%" src="../../assets/round_tip_en.png" alt="">
            <img ref="arrow" class="arrow" width="50%" src="../../assets/arrow.png" alt="">
        </div>

        <div class="round_tip_pc" ref="round_tip_pc">
            <div class="close_box" @click="close_box_pc" @touchstart="close_box_pc">
                <svg t="1726643104962" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4272" width="20" height="20"><path d="M594.983303 512.554066l411.9697 411.9697a58.304836 58.304836 0 0 1-82.428037 82.428036L512.555267 594.982103 100.585567 1006.951802a58.304836 58.304836 0 0 1-82.428036-82.428036L430.127231 512.554066 18.157531 100.584367A58.304836 58.304836 0 1 1 100.585567 18.156331L512.555267 430.12603 924.524966 18.156331a58.304836 58.304836 0 0 1 82.428037 82.428036L594.983303 512.554066z" fill="#2c2c2c" p-id="4273"></path></svg>
            </div>
            <img ref="arrow" class="arrow" width="50%" src="../../assets/arrow_pc.png" alt="">
            <img class="tip" v-if="lang == 'zh'" width="100%" src="../../assets/round_tip.png" alt="">
            <img class="tip" v-if="lang == 'en'" width="100%" src="../../assets/round_tip_en.png" alt="">
        </div>
    </div>
</template>

<script setup>
import Header from "@/components/Header/index.vue"  //头部
import {useLoadingStore} from "@/store/modules/loading"
import {useShowPayResult} from "@/store/modules/isShowPayResult"
import {ref,onMounted,reactive, onBeforeUnmount} from "vue"
import {createRole} from "@/hooks/createRole"
import {useCreatePlay} from "@/hooks/createPlay"
import RechargeComp from "@/views/Recharge/Index/RechargeComp/index.vue"
import {useRoute,useRouter} from "vue-router"
import {useIsShowHeader} from "@/store/modules/isShowHeader"
import {useGetGameUrl} from '@/hooks/getGameUrl'
import Login from "@/components/Login/index.vue"
import {useIsShowLogin} from "@/store/modules/isShowLogin/index.js"
import { useUserInfoStore } from '@/store/modules/user_info/index';
import BindAccount from "@/components/UserCenter/bindAccount/index.vue"
import axios from '@/utils/api'
import Dialog from "@/components/Dialog/index.vue"
import { setLanguage } from '@/utils/i18n';
import Fingerprint2 from 'fingerprintjs2'
import { useSetPwa } from '@/store/modules/setPwa/index';
import {generateJWT} from "@/utils/jwt"
const user_infoStore = useUserInfoStore();
const user_info = reactive(user_infoStore.userInfo)
const route = useRoute()
const router = useRouter()
const userInfo = ref([])
let goHome = ref(false)
let goHome_url = ref('')

const isShowLoginStore = useIsShowLogin();

const pwa = ref(false)
if(route.query.type == 'pwa'){
    pwa.value = true
}
let pixel_code = ref('')
if(route.query.pixel_code){
    pixel_code.value = route.query.pixel_code
}else{
    switch(route.query.id){
        case '33':
            pixel_code.value = '1223423302430441';
            break;
        case '70205':
            pixel_code.value = '348457851535499';
            break;  
        case '70206':
            pixel_code.value = '1223423302430441';
            break; 
        case '312125':
            pixel_code.value = '304265746080686';
            break;   
        case '312126': //九天仙缘
            pixel_code.value = '894361199408404';
            break;        
    }
}


!function (f, b, e, v, n, t, s) {
      if (f.fbq) return; n = f.fbq = function () {
        n.callMethod ?
        n.callMethod.apply(n, arguments) : n.queue.push(arguments)
      };
      if (!f._fbq) f._fbq = n; n.push = n; n.loaded = !0; n.version = '2.0';
      n.queue = []; t = b.createElement(e); t.async = !0;
      t.src = v; s = b.getElementsByTagName(e)[0];
      s.parentNode.insertBefore(t, s)
}(window, document, 'script','https://connect.facebook.net/en_US/fbevents.js');
fbq('init', pixel_code.value);

// console.log(window.fbq,'window.fbq');


let dialog_show = ref(false)
const dialog_hide = () => {
    getUserInfo()
    dialog_show.value = false
    if(user_info.status == 0){
        visible.value = true
    }
}
const openDialog = ()=>{
    dialog_show.value = true
}

function isFacebookBrowser() {
    const ua = navigator.userAgent;
    return /FBAN|FBAV/i.test(ua);
}

const paySubmit = ()=>{
    dialog_hide()
}
// const is_force_login = ref(false)
// const getGameDetail = async ()=>{
//     const res = await axios.get('/gameDetail?id='+route.query.id)
//     if(res.data.is_force_login && user_info.status == 0){
//         is_force_login.value = true
//         // visible.value = true
//         const intervalId = setInterval(()=>{
//             if(user_info.status == 0){
//                 visible.value = true
//             }
//             clearInterval(intervalId);
//         },180000) //180000 3分钟
//     }else{
//         const intervalId = setInterval(()=>{
//             if(user_info.status == 0){
//                 visible.value = true
//             }
//             clearInterval(intervalId);
//         },180000) //180000 3分钟
//     }
// }
if(localStorage.getItem('CompleteRegistration') == 1){
    fbq('track', 'CompleteRegistration')
    localStorage.setItem('CompleteRegistration',0)
}
// getGameDetail()
const tourist = ref(false)
const tourist_login = async () =>{

    Fingerprint2.get(async (components) => {
        const values = components.map((component) => component.value) 
        const fingercode = Fingerprint2.x64hash128(values.join(''), 31) 
        console.log('浏览器指纹：',fingercode) 

        if(route.query.type == undefined){
            route.query.type = ''
        }
        const res = await axios.get('/tourist_register_login?game_id='+route.query.id+'&type='+route.query.type+'&code='+fingercode)
        console.log(res);
        // isShowLoginStore.isShowLogin = true
        if(res.code === 1){
            // ElMessage.success('游客登陸')
            user_infoStore.setUserToken(res.data.token)
            user_infoStore.setUserToken_expire(res.data.expire)
            user_infoStore.setUserinfo(res.data.user_info)
            tourist.value = true
            
            console.log('注册-CompleteRegistration',fbq);
            localStorage.setItem('CompleteRegistration',1)
            
            if(isFacebookBrowser()){
                window.location.reload()
            }else if(isApp()){
                if(isDevice() == 'ios'){
                    window.location.reload()
                }else if(isDevice() == 'android'){
                    AndroidInterface.resetWeb("网页调用了 Android 方法");
                }
                console.log('网页调用了 Android 方法')
            }else{
                console.log('网页调用了 window.location.reload ')
                window.location.reload()
            }
            
            // isShowLoginStore.unShowLogin() //关闭登录弹窗
            // router.replace('/home')
        }else{
            ElMessage.error(res.message)
        }
    })    
    
    
}
const isDevice = ()=>{
    const userAgent = navigator.userAgent || window.opera;

    if(/iPhone|iPad|iPod/i.test(userAgent)){
        return 'ios'
    }else if(/Android/i.test(userAgent)){
        return 'android'
    }
}

const isApp = ()=>{
    if (typeof webkit !== 'undefined' || typeof AndroidInterface !== 'undefined') {
        return true;
    } else {
        return false;
    }
}

const isAppWebView = () => {
  const userAgent = navigator.userAgent.toLowerCase();
  // 假设你的 App 会设置类似的 User-Agent 字符串
  if (userAgent.includes('歪歪兔') || userAgent.includes('wv')) {
    // alert('当前在app中')
    return true;  // 是 WebView
  }
//   alert('当前在h5中')
  return false;  // 不是 WebView
}
const getUserInfo = async () =>{
    const data = {
        user_id:user_info.id,
    }
    const list = await axios.post('/getUserInfo',data)
    userInfo.value = list.data
    user_infoStore.setUserinfo(list.data.user_info)

    
    if(list.code == 5001 || list.code == 5002 || list.code == 5003 || list.message == 'Token失效'){
        if((!isApp() || isFacebookBrowser())){
            tourist_login()//游客无感登录
        }else{
            isShowLoginStore.showLogin()
        }
    }else{
        useGetGameUrl(game_id).then(data=>{
            console.log(data,'data');

            if(data.game_url){
                if(!data.game_url.includes("http")){
                    ElMessage.error("游戏地址错误")
                    setTimeout(()=>{
                        window.location.href = "/"
                    },2000)
                }else{
                    if(data.game_language == 'ch' && lang.value !== 'zh'){
                        setLanguage('zh');
                        location.reload()
                    }

                    if(data.game_language == 'en' && lang.value !== 'en'){
                        setLanguage('en');
                        location.reload()
                    }
                    game_url.value = data.game_url
                }
            }else{
                ElMessage.error("游戏地址错误")
                setTimeout(()=>{
                    window.location.href = "/"
                },2000)
            }
        })
    }
    
}


getUserInfo()

// const play_isLogin = ref(false)
const isShowLogin_fn = ()=>{
    isShowLoginStore.unShowLogin()
}

// console.log(isShowLoginStore.isShowLogin,'isShowLoginStore.isShowLogin')
// if(isShowLoginStore.isShowLogin){

// }
let is_gif_Show = ref(false)
const showHeaderStore = useIsShowHeader()
console.log(showHeaderStore,'showHeaderStore');

const iframe = ref()
let isLoading = ref(true)
iframe.onload = function() {
  loadingStore.stopLoading()
};

window.addEventListener('message', function(event) {
    // console.log(event,'eventevent');
    
    if(event.data == 'unShow'){
        showPayResultStore.unPayResult()
        pay_result_src.value = ''
    }
    if(event.data == 'getInfo'){
        getUserInfo()
    }
    if(event.data == 'bind'){
        user_info.status = 1
    }
    if(event.data.msg == 'to_fb_yh'){
        window.open(event.data.url)
    }
    if(event.data == 'reload'){
        window.location.reload()
    }

});

const game_box = ref()
if(window.innerWidth < 1024){
    // onMounted(()=>{
    //     game_box.value.style.height='100vh'
    //     console.log(game_box.value.style.height,'8888888');
    // })
    showHeaderStore.unShowHeader()
    console.log(showHeaderStore.isShowHeader,'555555555555555555555');
}



const game_id = route.query.id
const user_id = route.query.user_id

const pay_result_src = ref('')
const showPayResultStore = useShowPayResult()
const setPayResult = (url)=>{
    showPayResultStore.showPayResult()
    pay_result_src.value = url
}
const close_pay_result = ()=>{
    showPayResultStore.unPayResult()
    pay_result_src.value = ''
}
const game_url = ref('')


const goHomediv = ref()
let home_url = ref(true)
const isCloseGoHome = ref(true)
const toPages = (url,type)=>{
    if(type == 1){
        window.location.href =  window.hostUrl+url
    }else{
        console.log(window.hostUrl+url);
        // window.location.href =  window.hostUrl+url
        goHome.value = true
        goHome_url.value = window.hostUrl+url
        
        localStorage.setItem('isframe',true)
        HeaderRef.value.closeSocket()  //关闭客服的socket连接
    }
    
}
window.addEventListener('message', (event) => {
    // console.log(event,'event123');
    if(event.data == 'hh'){
        home_url.value = false
    }else if(event.data == 'show'){
        home_url.value = true
    }else if(event.data.data == 'updateUrl'){
        console.log(event.data,'修改地址')
        window.location.href = event.data.url
        window.location.reload()
    }else if(event.data == 'setIframe'){
        localStorage.setItem('isframe',true)
    }else if(event.data == 'toPages'){
        toPages('/pages/Recharge/economical/index')
    }else if(event.data == 'closeIframe'){
        goHome.value = false
    }else if(event.data == 'delUnreadMessage'){
        unreadMessage.value = 0
    }else if(event.data == 'hiddenClose'){
        isCloseGoHome.value = false
    }else if(event.data == 'showClose'){
        isCloseGoHome.value = true
    }
    
});
function iframeLoaded() {
    // console.log(e);
    
    const iframe = document.getElementById('myIframe');
    console.log(iframe.contentWindow.location);
    
    const newUrl = iframe.contentWindow.location.href;
    console.log('New URL:', newUrl);
}


let isEconomical = ref(false)
const closeBox = () => {
    isEconomical.value = false
};

const round_tip_pc = ref()
onMounted(() => {
  // 动态设置页面标题
  document.title = route.query.game_name || "游戏";

//   console.log(tourist.value,'tourist.valuetourist.valuetourist.value');
  
//   console.log(document.getElementById('giftPack'));

    //pc弹出虛寶提示
    // const round = document.getElementById('giftPack')
    // const isGuide = localStorage.getItem('isGuide')
    // if(isGuide !== 'true' && route.query.type !== 'pwa' && round){
    //     setTimeout(() => {
    //         // console.log(round.value,'round.value');
    //         // 获取 div 在屏幕中的位置
    //         var rect = round.getBoundingClientRect();
            
    //         // 输出位置信息
    //         console.log('Top: ' + rect.top);
    //         console.log('Left: ' + rect.left);
    //         console.log('Bottom: ' + rect.bottom);
    //         console.log('Right: ' + rect.right);
    //         console.log('Width: ' + rect.width);
    //         console.log('Height: ' + rect.height);

    //         const top = JSON.stringify(rect.top + 150 + 'px')
    //         const left = JSON.stringify(rect.left + 'px')

    //         console.log(round_tip_pc.value,'round_tip_pc');
            
    //         round_tip_pc.value.style.top = JSON.parse(top)
    //         round_tip_pc.value.style.left = JSON.parse(left)
    //         navLeft.value = 0 //弹出小球
            
    //         round_tip_pc.value.style.transform = "translate(-50%,-50%) scale(1)";
            
    //         localStorage.setItem('isGuide','true')
    //         clearTimeout(timeout.value);
    //     }, 480000);//八分钟480000
    // }
  
});

let price = ref(0)
let pay_info = reactive({})	
const createPlay = async (param,game_id)=>{
    const data = await useCreatePlay(param,game_id)
	console.log(data);
	pay_info = data.data
	price.value = pay_info.usd
	isEconomical.value = true

    fbq('track', 'AddToCart',{value:price.value,currency:'USD',time:new Date().getTime()}); 
    console.log('发起支付-AddToCart',fbq);
}

const loadingStore = useLoadingStore()
loadingStore.startLoading()
let sendTime = null

// 添加事件监听器以接收来自 iframe 的消息
let isRole=true;
window.addEventListener('message', async function(event) {
    const $param = event.data;

    // console.log("initdata");
    // console.log('param',$param);
    // console.log('Method',$param.Method);
    // 消息类型
    switch($param.Method){
        //创建角色接口
        case "createRole":
            console.log("角色创建")
            createRole($param,game_id);
            sendTime = setInterval(() => {
                sendData.update_time = parseInt(new Date().getTime() / 1000)
                sendMessage()
            }, 1000);
            break;
        // 升級
        case "levelUp":
            // if(isRole){
                console.log("角色升級")
                // isRole=false;
                createRole($param,game_id);
            // }
            break;
        // 创建支付订单
        case "createPay":
            console.log('创建支付订单');
            createPlay($param,game_id);
            break;
        case "openPlatform":
            console.log('打开商店');
            openPlatform()
           
            break;
        // 取消支付
        // case "closePay":
        //     $("#sdkpaymain").css("display","none");
        //     fbq('track','Purchase');
        //     console.log("隱藏信息")

        //     break;
    }

});

const navTop = ref(200);
const navLeft = ref(-40);
const isDragging = ref(false);
const startX = ref(0);
const startY = ref(0);
const initialTop = ref(200);
const initialLeft = ref(0);
const isHidden = ref(true);
const timeout = ref(null);
const offset = 20; // 距离右边的距离
const hiddenWidth = 20; // 隐藏状态的宽度
const isRight = ref(false)

const startDrag = (event) => {
  isDragging.value = true;
  startX.value = event.clientX || event.touches[0].clientX;
  startY.value = event.clientY || event.touches[0].clientY;
  initialTop.value = navTop.value;
  initialLeft.value = navLeft.value;

  resetTimeout();
  
  

  document.addEventListener('mousemove', onDrag);
  document.addEventListener('mouseup', stopDrag);
  document.addEventListener('touchmove', onDrag);
  document.addEventListener('touchend', stopDrag);

  
};

const onDrag = (event) => {
  if (isDragging.value) {
    const currentX = event.clientX || event.touches[0].clientX;
    const currentY = event.clientY || event.touches[0].clientY;
    const deltaX = currentX - startX.value;
    const deltaY = currentY - startY.value;
    const newTop = initialTop.value + deltaY;
    const newLeft = initialLeft.value + deltaX;
    const minTop = 0;
    const maxTop = window.innerHeight - 370 - 50; // 假设circle-nav的高度为370px
    const minLeft = -40; // 设置最小左边距
    const maxLeft = window.innerWidth - 60 - offset; // 设置最大左边距

    if (newTop >= minTop && newTop <= maxTop) {
      navTop.value = newTop;
    } else if (newTop < minTop) {
      navTop.value = minTop;
    } else if (newTop > maxTop) {
      navTop.value = maxTop;
    }

    if (newLeft >= minLeft && newLeft <= maxLeft) {
      navLeft.value = newLeft;
    } else if (newLeft < minLeft) {
      navLeft.value = minLeft;
    } else if (newLeft > maxLeft) {
      navLeft.value = maxLeft;
    }
  }
};

const stopDrag = () => {
  isDragging.value = false;
  if (!is_gif_Show.value) {
    resetTimeout();
  }
  document.removeEventListener('mousemove', onDrag);
  document.removeEventListener('mouseup', stopDrag);
  document.removeEventListener('touchmove', onDrag);
  document.removeEventListener('touchend', stopDrag);

  // Determine snap direction and apply shrinking
  const element = document.querySelector('#show_play_game_list');
  if (navLeft.value < window.innerWidth / 2) {
    // Snap to the left
    navLeft.value = 0; // Move out of view to the left
    element.classList.add('shrunk-left');
    isRight.value = false
  } else {
    // Snap to the right
    navLeft.value = window.innerWidth - 60 - offset; // Move out of view to the right with offset
    element.classList.add('shrunk-right');
    isRight.value = true
  }
};

const resetTimeout = () => {
  clearTimeout(timeout.value);
  timeout.value = setTimeout(() => {
    if (!is_gif_Show.value) {
      // Apply the shrinking and hiding effect
      stopDrag(); // Call stopDrag to apply shrinking logic
    }
  }, 3000);
  isHidden.value = false;
  const element = document.querySelector('#show_play_game_list');
  element.classList.remove('shrunk-left', 'shrunk-right'); // Remove previous shrinking classes
};

const isMenuItem_my = ref(true)
const menuItem_my = ref()
const toggleVisibility = () => {
  if (isHidden.value) {
    isHidden.value = false;
    // resetTimeout();
  }

  if(!isMenuItem_my.value){
    console.log('remove')
    menuItem_my.value.classList.remove('menuItem_my')
  }

  const isGuide = localStorage.getItem('isGuide')
  const isGuide_gift_game = localStorage.getItem('isGuide_gift_game')
  console.log(isGuide);
  
  if(isGuide == 'true' && isMenuItem_my.value){
    console.log(123456);
    
    round_tip.value.style.transform = "translate(-50%,-50%) scale(0)";
    if(isGuide_gift_game !== 'true'){
        menuItem_my.value.classList.add('menuItem_my')
    }
    
    isMenuItem_my.value = false
  }
};

const handleBeforeUnload = (event) => {
    // 在这里执行你的逻辑
    console.log('页面即将刷新或关闭');
    clearTimeout(timeout.value);
    clearInterval(sendTime)
    disconnect();
};

onMounted(() => {
  document.addEventListener('mouseup', stopDrag);
  document.addEventListener('touchend', stopDrag);
  connectWebSocket();
  window.addEventListener('beforeunload', handleBeforeUnload);
});

onBeforeUnmount(() => {
  handleBeforeUnload()
  document.removeEventListener('mouseup', stopDrag);
  document.removeEventListener('touchend', stopDrag);
  window.removeEventListener('beforeunload', handleBeforeUnload);
});

const visible = ref(false)
const isClose = ref(false)
const handleClose = (type) => {
    console.log(type,55555);
    visible.value = false
    if(type == 1){
        user_info.status = 1
    }
    // if(user_info.status == 0 && !isClose.value){
    //     setTimeout(() => {
    //         visible.value = true
    //         isClose.value = true
    //     }, 900000); //900000
    // }

};



let fb_url = ref('')
let lang = ref('')
if(localStorage.getItem('lang') == 'en'){
    lang.value = 'en'
    fb_url = 'https://www.facebook.com/profile.php?id=61564549723234'
}else{
    lang.value = 'zh'
    fb_url = 'https://www.facebook.com/profile.php?id=61562966949089'
}

function isAppleDevice() {
    return /iPhone|iPad|iPod|Macintosh/.test(navigator.userAgent) && !window.MSStream;
}
const setVh = () => {
    // 获取当前视口高度
    let vh = window.innerHeight * 0.01;
    // 设置 --vh 变量的值为视口高度的 1%
    document.documentElement.style.setProperty('--vh', `${vh}px`);

    const bodyH = document.documentElement.clientHeight
    

    if (isAppleDevice()) {
        const bodyH = document.documentElement.clientHeight
        document.documentElement.style.setProperty('--bodyH', `${bodyH}px`);
        document.documentElement.style.setProperty('--bodyPay', `${bodyH}px`);
    } else {
        document.documentElement.style.setProperty('--bodyH', `100vh`);
        const bodyH = document.documentElement.clientHeight
            document.documentElement.style.setProperty('--bodyPay', `${bodyH}px`);
    }

    
}

// 初始设置
setVh();

// 当窗口大小发生变化时，重新计算视口高度
window.addEventListener('resize', setVh);

const round = ref()
const round_tip = ref()
const arrow = ref()

// const isGuide = localStorage.getItem('isGuide')
// if(isGuide !== 'true' && route.query.type !== 'pwa'){
//     setTimeout(() => {
//         // console.log(round.value,'round.value');
//         // 获取 div 在屏幕中的位置
//         var rect = round.value.getBoundingClientRect();
        
//         // 输出位置信息
//         // console.log('Top: ' + rect.top);
//         // console.log('Left: ' + rect.left);
//         // console.log('Bottom: ' + rect.bottom);
//         // console.log('Right: ' + rect.right);
//         // console.log('Width: ' + rect.width);
//         // console.log('Height: ' + rect.height);

//         const top = JSON.stringify(rect.top - 40 + 'px')
//         const left = JSON.stringify(rect.left + 200 + 'px')
//         const left_r = JSON.stringify(rect.left - 110 + 'px')

        
//         if(isRight.value){
//             round_tip.value.style.top = JSON.parse(top) 
//             round_tip.value.style.left = JSON.parse(left_r)
//             arrow.value.style.transform = "rotate(180deg) scaleY(-1)";

//             const element = document.querySelector('#show_play_game_list');
//             element.style.setProperty('left', 'calc(100% - 80px)', 'important');
//         }else{
//             round_tip.value.style.top = JSON.parse(top)
//             round_tip.value.style.left = JSON.parse(left)
//             navLeft.value = 0 //弹出小球
//         }
//         round_tip.value.style.transform = "translate(-50%,-50%) scale(1)";
        
//         localStorage.setItem('isGuide','true')
//         clearTimeout(timeout.value);
//     }, 480000);//八分钟480000
// }

const close_box = ()=>{
    round_tip.value.style.transform = "translate(-50%,-50%) scale(0)";
    isMenuItem_my.value = false
    localStorage.setItem('isGuide_gift_game',true)
}
const close_box_pc = ()=>{
    round_tip_pc.value.style.transform = "translate(-50%,-50%) scale(0)";
    isMenuItem_my.value = false
    localStorage.setItem('isGuide_gift_game',true)
}


const ws = ref(null);
const isConnected = ref(false);
let timer = null
const connectWebSocket = () => {
  ws.value = new WebSocket(`wss://${window.location.hostname.replace(/^www\./, '')}/ws?type=web&user_id=${user_info.id}&username=${user_info.username}`);

  // 监听WebSocket打开事件
  ws.value.onopen = () => {
    isConnected.value = true;
    console.log('WebSocket连接已打开');

     // 启动定时器，每50秒发送一次心跳包
     timer = setInterval(() => {
      if (ws.value.readyState === WebSocket.OPEN) {
        ws.value.send(JSON.stringify({ type: 'ping' })); // 发送心跳包
        console.log('已发送心跳包');
      }
    }, 50000); // 每50秒发送一次
    
  };

  // 监听消息接收
  ws.value.onmessage = (event) => {
    console.log('收到消息:', JSON.parse(event.data));
  };

  // 监听连接关闭
  ws.value.onclose = () => {
    isConnected.value = false;
    clearInterval(timer);
    console.log('WebSocket连接已关闭');
  };

  // 监听错误事件
  ws.value.onerror = (error) => {
    console.error('WebSocket错误:', error);
  };
};

const start_time = parseInt(new Date().getTime() / 1000)
let sendData = {
    user_id: user_info.id,
    game_id,
    start_time,
    update_time: start_time,
    ControllerName: 'UserGameTime'
}


// 发送消息
const sendMessage = () => {
  if (isConnected.value) {
    ws.value.send(JSON.stringify(sendData));
    console.log('消息已发送',sendData);
  } else {
    console.log('WebSocket未连接');
  }
};
    
// 断开连接
const disconnect = () => {
  if (ws.value) {
    console.log('链接关闭');
    
    ws.value.close();
  }
};    

const openBind = () => {
    if(user_info.status == 0){
        visible.value = true
    }else{
        console.log(lang.value)
        if(lang.value == 'zh'){
            ElMessage.warning("已經綁定過了")
        }else{
            ElMessage.warning("Already bound")
        }
    }
};

const openPlatform = ()=>{
    if(user_info.status == 0){
        visible.value = true
        ElMessage.warning("請先綁定帳號")
        return
    }
    isShowPlatform.value = true
}

const platformSub = ()=>{
    toApp()
    hidePlatform()
}
const toApp = ()=>{
    if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) { //移动
        if(/Android/i.test(navigator.userAgent)){
            console.log('安卓');  
            // if(!isPwa.value){
            //     ElMessage.warning("已安裝無需重復安裝")
            //     return
            // }
            downLoadApp()
            // try {
            //     // pwaEvent.prompt()
                
            // }catch (error) {
            //     if(lang.value == 'zh'){
            //         ElMessage.warning("該瀏覽器不支持安裝到桌面，請使用谷歌瀏覽器或Edge瀏覽器")
            //     }else{
            //         ElMessage.warning("This browser does not support installation to the desktop, please add to the favorites manually")
            //     }
                
            // }
        }else{
            window.open("itms-apps://itunes.apple.com/app/id6738236923");
            console.log('苹果');
        }
    } else{ //pc
        console.log('pc',navigator.userAgent);
        // if(!isPwa.value){
        //     ElMessage.warning("已安裝無需重復安裝")
        //     return
        // }
        // downLoadApp()
        try {
            pwaEvent.prompt()
        } catch (error) {
            if(lang.value == 'zh'){
                ElMessage.warning("該瀏覽器不支持安裝到桌面，請使用谷歌瀏覽器或Edge瀏覽器")
            }else{
                ElMessage.warning("This browser does not support installation to the desktop, please add to the favorites manually")
            }
        }
    }
}

const downLoadApp = ()=>{
    if(isApp() && !isFacebookBrowser()){
        if(lang.value == 'en'){
            ElMessage.warning("Already installed")
        }else{
            ElMessage.warning("已經安裝過了")
        }
    }else{
        const link = document.createElement('a');
        if(route.query.id == '312129'){ //正式服与测试服游戏id不一样
            link.href = 'https://yyfuns.com/apk/Dragon-Ball.apk';  
        }else if(route.query.id == '312131'){
            link.href = 'https://yyfuns.com/apk/jingling.apk'; 
        }else{
            link.href = 'https://yyfuns.com/apk/yytwo.apk';
        }
        link.click();
    }
    
}

let pwaEvent = null
let setPwa_store = useSetPwa();
// 主线程中的 JavaScript
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js')
    .then(function(reg) {
    //   console.log('Service Worker Registered');

      // 获取当前的语言设置
      const lang = localStorage.getItem('lang');

      // 使用 postMessage 传递语言设置给 Service Worker
      if (reg.active) {
        reg.active.postMessage({ lang });
      }
    });

    pwaEvent = setPwa_store.getPwa()
    // console.log(pwaEvent,'pwaEvent');
    
}


let isPwa = ref(false)
const pwa2 = localStorage.getItem('isPwa')
if(pwa2 == 'true'){
    isPwa.value = true
    
}
window.addEventListener('beforeinstallprompt', (e) => {
    console.log(e);
    pwaEvent = e
    isPwa.value = true
    localStorage.setItem('isPwa',true)
    setPwa_store.setPwa(e)
})

window.addEventListener('appinstalled', () => {
    console.log('应用已安装!');
    isPwa.value = false
    localStorage.setItem('isPwa',false)
});


let isShowPlatform = ref(false)
const hidePlatform = ()=>{
    isShowPlatform.value = false
}

const toFb = ()=>{
    if(isApp() && !isFacebookBrowser()){
        if(isDevice() == 'ios'){
            webkit.messageHandlers.reloadView.postMessage('https://www.facebook.com/YYTwo2/');
        }else if(isDevice() == 'android'){
            AndroidInterface.openWindow('https://www.facebook.com/YYTwo2/');
        }
        
    }else{
        if(localStorage.getItem('lang') == 'en'){
            window.open('https://www.facebook.com/profile.php?id=61564549723234')
        }else{
            window.open('https://www.facebook.com/YYTwo2/')
        }
    }
    
}

function isMobileChrome() {
    const userAgent = navigator.userAgent || navigator.vendor || window.opera;
    if (/android|iphone|ipad|mobile/i.test(userAgent)) {
        // 检查是否为 Chrome 浏览器
        return /Chrome\/\d+/i.test(userAgent) && !/Edge\/\d+/i.test(userAgent);
    }
    return false;
}

let isChrome = ref(false)
if (isMobileChrome()) {
    isChrome.value = true
}

const closeGoHome = ()=>{
    goHome.value = false
    HeaderRef.value.openSocket()
}



const isShowTip = ref(true)
if (typeof webkit !== 'undefined' || typeof AndroidInterface !== 'undefined') {
    isShowTip.value = false
}

const isPc = ref(false)
if(window.innerWidth > 1024){
    isPc.value = true
}
// setTimeout(() => {
//     openPlatform()
// }, 3000);

const downLoadGameApp = ()=>{
    if(/Android/i.test(navigator.userAgent)){
        downLoadApp()
    }else{
        window.open("itms-apps://itunes.apple.com/app/id6738236923");
        console.log('苹果');
    }
}

const HeaderRef = ref()
const unreadMessage = ref(0); //未读消息


onMounted(()=>{
    console.log(HeaderRef.value.unreadMessage,'66666666666');
    watch(() => HeaderRef.value?.unreadMessage,(newVal) => {
        console.log('未读消息变化:', newVal); // 能触发更新
        unreadMessage.value = newVal
    });
})
const toCus = ()=>{
    console.log(HeaderRef.value,'555555555555555');
    HeaderRef.value.openCustomer()
    
}

</script>

<style lang="less" scoped>

.close {
    z-index: 2004;
    position: absolute;
    right: 25px;
    top: 10px;
    width: 40px;
    height: 40px;
    background-image: url();
}


@media (min-width: 1025px) {
    .game-box{
        width: 100%;
        height: calc(100vh - 30px);
        position: relative;
        z-index: 999;
        background-image: url(https://www.yyfuns.com/static/bg.gif);
        background-repeat: repeat;
        background-color: black;
        overflow: hidden;
    }
    .pay_result{
        background-color: #fff;
        width: 600px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 10000;
        height: 700px;
        border-radius: 15px;
        iframe{
            border-radius: 15px;
            position: relative;
            z-index: 2003;
        }
        .close:hover {
            cursor: pointer;
            background-image: url();
        }
    }
}

@media (max-width: 1024px) {
    .isChrome{
        // top: 30px !important;
    }
    .pay_result{
        background-color: #fff;
        width: 100%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 10000;
        // height: 100vh;
        height: var(--bodyPay);
        iframe{
            position: relative;
            z-index: 99;
        }
    }
    .game-box{
        width: 100%;
        // height: calc(var(--vh, 1vh) * 100);
        height:100%;
        position: absolute;
        z-index: 999;
        overflow: hidden;
        background-image: url(https://www.yyfuns.com/static/bg.gif);
        background-repeat: repeat;
        background-color: black;
        .gameTip{
            position: fixed;
            bottom: 5%;
            left: 50%;
            transform: translate(-50%);
            background-color: rgb(0 0 0 / 30%);
            color: #ffffff;
            display: inline-flex;
            align-items: center;
            padding: 3px 10px;
            border-radius: 5px;
            img{
                filter: invert(1) brightness(30);
            }
            p{
                margin:0 10px;
                font-size: 13px;
                white-space:nowrap;
                text-decoration: underline;
            }
        }
    }
    .recharge_content{
        background-color: white;
        position: fixed;
        // top: 50%;
        left: 50%;
        transform: translate(-50%);
        width: calc(100% - 20px);
        z-index: 1000;
        padding: 0 10px;
        height: var(--bodyH);
        bottom: 0px;
        overflow: auto;
        animation: slide-up 0.2s ease-out forwards;
    }
    .blocker{
        width: 100vw;
        height: 100vh;
        position: fixed;
        top:0;
        left:0;
        background:rgba(0,0,0,.5);
        z-index: 2;
    }

    @keyframes slide-up {
        from {
            transform: translate(-50%, 100%);
        }
        to {
            transform: translate(-50%, 0);
        }
    }
}
@media (min-width: 1025px) {
    .circle-nav {
        display: none;
    }
}
@media (max-width: 1025px) {
    .isRight{
        transform: scaleX(-1);
        left:calc(100% - 224px) !important;
        .center{
            p{
                transform: scaleX(-1);
                left:56% !important;
            }
        }
        p,.center{
            transform: scaleX(-1);
        }
    }
    .circle-nav.shrunk-left {
        left:-45px !important;
    }
    .circle-nav.shrunk-right {
        left: calc(100% - 40px) !important
    }
    .circle-nav {
        position: fixed;
        height: 370px;
        width: 224px;
        // left: 0;
        bottom: 46px;
        z-index: 999;
        overflow: hidden;
        pointer-events: none;
        
        .circle-inside {
            position: relative;
            height: 370px;
            width: 370px;
            left: -147px;
            bottom: 0;
            .ring-back {
                -webkit-transition-delay: 0s;
                transition-delay: 0s;
            }
            .ring-back {
                position: absolute;
                top: 0;
                left: 0;
                height: 370px;
                width: 370px;
                border: 120px solid #ebebebe0;
                // border: 120px solid rgba(239,108,160, .8);
            }
            .ring {
                pointer-events: all;
                position: absolute;
                height: 370px;
                width: 370px;
                border-radius: 50%;
                opacity: 0;
                -webkit-transform-origin: 50% 50%;
                transform-origin: 50% 50%;
                -webkit-transform: scale(0.1) rotate(-270deg);
                transform: scale(0.1) rotate(-270deg);
                -webkit-transition-property: all;
                transition-property: all;
                -webkit-transition-duration: .3s;
                transition-duration: .3s;
                -webkit-transition-timing-function: ease-in;
                transition-timing-function: ease-in;
                box-sizing: border-box;
                
                .menuItem {
                    position: absolute;
                    display: block;
                    // width: 8em;
                    // height: 8em;
                    line-height: 1;
                    margin-left: -4em;
                    margin-top: -4em;
                    text-align: center;
                    font-size: 10px;
                    color: #404040;
                    .tag{
                        background-color: #f56c6c;
                        width: 25px;
                        height: 25px;
                        line-height: 25px;
                        border-radius: 50%;
                        position: absolute;
                        top: -8px;
                        right: 0;
                        font-size: 13px;
                        color: #fff;
                    }
                    .img {
                        width: 5em;
                        height: 5em;
                        display: block;
                        margin: 0 auto;
                        background-color: #fff;
                        border-radius: 10px;
                        overflow: hidden;
                    }
                    .text {
                        font-size: 13px;
                        margin: 1px 0 0;
                        line-height: 1.5;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                    }
                    .text_en{
                        font-size: 14px;
                        margin-top: 5px;
                    }
                    p{
                        font-size: 14px;
                        margin-top: 10px;
                        word-break: break-word;
                        width: 65px;
                    }
                }
                svg{
                    display: block;
                    // width:54px;
                    // height: 49px;
                    background-color: white;
                    border-radius: 50%;
                    font-size: 17px;
                    line-height: 22px;
                }
                .allPlay{
                    display: block;
                    width: 37px;
                    // height: 40px;
                    padding: 5px 10px;
                    background-color: #ef6ca0;
                    border-radius: 50%;
                    border: 2px solid white;
                    font-size: 17px;
                    line-height: 22px;
                }
                .menuItem_pwa{
                    text-decoration: none;
                    .allPlay{
                        height: 35px;
                        width: 30px;
                        background-repeat: no-repeat;
                        background-color: white;
                        background-position: center !important;
                        background-size: 30px !important;
                    }
                    p{
                        width: 80px;
                    }
                }
                .economical{
                    .allPlay{
                        border: none;
                        background-color: white;
                        background-size: 50px !important;
                        filter: drop-shadow(3px 4px 6px #fff);
                        background-image: url(https://www.yyfuns.com/static/money_card.png) !important;
                    }
                }
                .menuItem_pwa:first-child{
                    left: 56% !important;
                    top: 16% !important;
                    .allPlay{
                        background-image: url(https://www.yyfuns.com/h5/static/tabbar/my.png) !important;
                    }
                }
                .menuItem_pwa:nth-child(2){
                    left: 78% !important;
                    top: 30% !important;
                    .allPlay{
                        background-image: url(https://www.yyfuns.com/static/customer_service.png) !important;
                    }
                }
                .menuItem:first-child{
                    left: 56%;
                    top: 18%;
                    .allPlay{
                        height: 35px;
                        width: 30px;
                        background-image: url(https://www.yyfuns.com/h5/static/tabbar/home.png);
                        background-repeat: no-repeat;
                        background-color: white;
                        background-position: top;
                        background-size: 34px;
                    }
                }
                .menuItem:nth-child(2){
                    left: 75%;
                    top: 24%;
                    .allPlay{
                        height: 35px;
                        width: 30px;
                        background-image: url(https://www.yyfuns.com/static/bind.png);
                        background-repeat: no-repeat;
                        background-color: white;
                        background-position: center;
                        background-size: 34px;
                    }
                }
                .menuItem:nth-child(3){
                    left: 84%;
                    top: 49%;
                    // animation: identifier 1s infinite;
                    .allPlay{
                        height: 35px;
                        width: 30px;
                        background-image: url(https://www.yyfuns.com/h5/static/tabbar/recharge.png);
                        background-repeat: no-repeat;
                        background-color: white;
                        background-position: center;
                        background-size: 24px;
                    }
                }
                .menuItem_my{
                    animation: identifier 1s infinite;
                }
                @keyframes identifier {
                    0% {
                        transform: scale(1);
                    }
                    50%{
                        transform: scale(1.15);
                    }
                    100%{
                        transform: scale(1);
                    }
                }
                .menuItem:nth-child(4){
                    left: 75%;
                    top: 74%;
                    .allPlay{
                        height: 35px;
                        width: 30px;
                        background-image: url(https://www.yyfuns.com/h5/static/tabbar/my.png);
                        background-repeat: no-repeat;
                        background-color: white;
                        background-position: center;
                        background-size:24px;
                    }
                }
                // .menuItem:nth-child(5){
                //     left: 56%;
                //     top: 85%;
                //     .allPlay{
                //         height: 35px;
                //         width: 30px;
                //         background-image: url(https://yyfuns.com/static/back.png);
                //         background-repeat: no-repeat;
                //         background-color: white;
                //         background-position: center;
                //         background-size:30px;
                //     }
                // }
                .menuItem:nth-child(5){
                    left: 56%;
                    top: 85%;
                    .allPlay{
                        height: 35px;
                        width: 30px;
                        background-image: url(https://yyfuns.com/static/customer.png);
                        background-repeat: no-repeat;
                        background-color: white;
                        background-position: center;
                        background-size:30px;
                    }
                }
                // .menuItem:nth-child(5){
                //     left: 56%;
                //     top: 85%;
                //     .allPlay{
                //         height: 35px;
                //         width: 30px;
                //         background-image: url(https://yyfuns.com/static/fb.png);
                //         background-repeat: no-repeat;
                //         background-color: white;
                //         background-position: center;
                //         background-size:30px;
                //     }
                // }
            }
            .center {
                pointer-events: all;
                height: 45px;
                width: 45px;
                border-radius: 66px;
                text-align: center;
                position: absolute;
                right: 0;
                top: 0;
                left: 0;
                bottom: 0;
                margin: auto;
                background-repeat: no-repeat;
                background-size: 100% auto;
                -webkit-animation: blink 320ms steps(2) infinite;
                animation: blink 320ms steps(2) infinite;
                
                .tag{
                    background-color: #f56c6c;
                    width: 25px;
                    height: 25px;
                    line-height: 25px;
                    border-radius: 50%;
                    position: absolute;
                    top: -6px;
                    right: -7px;
                    font-size: 13px;
                    color: #fff;
                }
                .img {
                    width: 100%;
                    height: 100%;
                    display: block;
                }
                .round{
                    width: 44px;
                    height: 44px;
                    background-color: rgb(239,108,160);
                    border-radius: 50%;
                    border: 3px solid #fff;
                    // animation: borderAnimation 1s infinite;
                    transition: all .2s;
                    position: relative;
                    display: block;
                    overflow: hidden;
                }
                p{
                    width: 100%;
                    height: 100%;
                    font-size: 12px;
                    position: absolute;
                    // color: white;
                    border-radius: 50%;
                    left: 57%;
                    top: 56%;
                    transform: translate(-50%,-50%);
                    // background-image: url(https://www.yyfuns.com/static/logo.jpg);
                    background-repeat: no-repeat;
                    background-size: 80% auto;
                    background-position: center;
                    box-shadow: 0px 0 20px 5px rgba(0, 0, 0, 0.3);
                    background-color: white;
                }
                @keyframes borderAnimation {
                    0% {
                    border-color: #fff;
                    transform: scale(1);
                    }
                    50% {
                    border-color: #ef6ca0;
                    transform: scale(1.1);
                    }
                    100% {
                    border-color: #fff;
                    transform: scale(1);
                    }
                }
                
            }
            .on{
                transform : scale(0.1) rotate(270deg);
                opacity: 0;
            }
            .off{
                transform : scale(1) rotate(0);
                opacity: 1;
            }
        }
        
        
    }
    .open {
        .ring{
            opacity: 1;
            -webkit-transform: scale(1) rotate(0);
            transform: scale(1) rotate(0);
            -webkit-transition-delay: .2s;
            transition-delay: .2s;
        }
        
    }
}
.transition-all {
    transition: all 0.3s;
}
.hidden {
    transition: all 0.3s;
}

/* 模态框样式 */
.modal-overlay,
.modal-setPwd {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    input{
        margin-bottom: 10px;
        text-align: left;
    }
}

.modal-setPwd {
    z-index: 1001 !important;
}

.modal {
    background: linear-gradient(to bottom right, #f9f9f9, #ffffff);
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    width: 320px;
    text-align: center;
    position: relative;
}

.modal-header {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    flex-direction: column;
    p{
        font-size: 13px;
        margin-top: 5px;
        color: #7f7f7f;
    }
}

.modal-header h3 {
    margin: 0;
    font-size: 24px;
    color: #3c4043;
    font-family: 'Roboto', sans-serif;
}

.close-button1 {
    background: none;
    border: none;
    font-size: 28px;
    color: #9aa0a6;
    cursor: pointer;
    transition: color 0.3s ease;
    position: absolute;
    right: 20px;
    top: 5px;
}

.close-button1:hover {
    color: #1a73e8;
}

.modal-body {
    margin-bottom: 20px;
}

.modal-body label {
    display: block;
    font-size: 16px;
    color: #3c4043;
    margin-bottom: 5px;
    font-family: 'Roboto', sans-serif;
}

.modal-body input {
    width: 90%;
    padding: 10px;
    border: 1px solid #dadce0;
    border-radius: 8px;
    font-size: 16px;
    font-family: 'Roboto', sans-serif;
}

.modal-footer {
    display: flex;
    justify-content: space-around;
}

.modal-footer p {
    margin-left: 10px;
    padding: 10px 45px;
    font-size: 16px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Roboto', sans-serif;
    margin-right: 0;
    background-color: #ef6ca0;
    color: white;
}

.modal-footer .cancel-button {
    background-color: #f5f5f5;
    color: #3c4043;
}

.modal-footer .cancel-button:hover {
    background-color: #ebebeb;
}

.modal-footer .confirm-button {
    background-color: #1a73e8;
    color: #fff;
}

.modal-footer .confirm-button:hover {
    background-color: #174ea6;
}
.modal_iframe{
    width: 100%;
    position: absolute;
    top: 10vh;
    height: 75vh;
    z-index: 1000;
    .close_box{
        position: relative;
        .b{
            position: relative;
            left: 25px;
            top: -4px;
        }
        .svg{
            position: relative;
            top: 6px;
        }
        .back{
            background-color: transparent !important;
        }
        p{
            position: absolute;
            right: 0;
            // padding-right: 30px;
            height: 50px;
            line-height: 60px;
            width: 100px;
            text-align: center;
            background-color: white;
            // transform: scaleX(1.2);
            color: #747474;
        }
        div{
            position: absolute;
            left: 0;
            height: 60px;
            width: 50px;
            background-color: white;
            display: flex;
            align-items: center;
        }
    }
    .goHome{
        
        background-color: white;
    }
}


@media (min-width: 1025px) {
    .round_tip{
        display: none;
    }
}
.round_tip{
    position: absolute;
    width: 200px;
    height: 200px;
    // background-color: #1a73e8;
    z-index: 999;
    transform: translate(-50%,-50%) scale(0);
    top: 50%;
    left: 50%;
    transition: all 0.3s;
    .arrow{
        transform-origin: right;
    }
    .close_box{
        position: absolute;
        right: 10px;
    }
}

@media (max-width: 1025px) {
    .round_tip_pc{
        display: none;
    }
}
.round_tip_pc{
    position: absolute;
    width: 200px;
    height: 200px;
    // background-color: #1a73e8;
    z-index: 999;
    transform: translate(-50%,-50%) scale(0);
    top: 50%;
    left: 50%;
    transition: all 0.3s;
    .arrow{
        transform-origin: right;
        position: relative;
        left: 70px;
    }
    .close_box{
        position: absolute;
        right: 10px;
    }
    .tip{
        margin-top: -40px;
    }
}
</style>